<%include ../includes/header.html %>
<style type="text/css">
    div#canvas-frame {
        border: none;
        cursor: pointer;
        width: 100%;
        height: 500px;
        background-color: #EEEEEE;
        position: relative;
    }

</style>
    <section class="content-header">
      <h1>
        初级教程
        <small>第6章 将canvas作为纹理，将动画作为纹理（二）</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Junior</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div id="canvas-frame"></div>
    </section>
    <!-- /.content -->
<%include ../includes/footer.html %>
<script src="/javascripts/clock.js"></script>
<script>
  $(function(){
    var camera, scene, renderer;
    var mesh;
    var texture;
    var canvasWidth, canvasHeight;

    clock();
    init();
    animate();

    function init() {

        var canvasWidth = document.getElementById('canvas-frame').clientWidth;
        var canvasHeight = document.getElementById('canvas-frame').clientHeight;
        renderer = new THREE.WebGLRenderer();
        renderer.setSize( canvasWidth, canvasHeight );
         document.getElementById('canvas-frame').appendChild(renderer.domElement);
        //
        camera = new THREE.PerspectiveCamera( 70, canvasWidth / canvasHeight, 1, 1000 );
        // camera = new THREE.OrthographicCamera( canvasWidth / - 2, canvasWidth / 2, canvasHeight / 2, canvasHeight / - 2, 1, 650 );
        camera.position.z = 400;
        scene = new THREE.Scene();


        var geometry = new THREE.CubeGeometry(150, 150, 150);
        texture = new THREE.Texture( canvas);
        var material = new THREE.MeshBasicMaterial({map:texture});
        mesh = new THREE.Mesh( geometry,material );
        scene.add( mesh );

    }

    function animate() {
        texture.needsUpdate = true;
        mesh.rotation.y -= 0.01;
        mesh.rotation.x -= 0.01;
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }
  })
</script>
